<template>
  <div id="shoppingcarlist">
    <scroll class="content" ref="scroll" @scroll1="scrolltop" :probetype="3">
      <shoppinglistitem
        v-for="(item, index) in cartlist"
        :key="index"
        :caritem="item"
        @remove="shanchu"
      ></shoppinglistitem>
    </scroll>
    <div class="bottom">
      <button2 @click.native="allclick" :isactive="ischeckedall"></button2>
      <span class="choose">全选</span>
      <span class="total">合计 {{ gettotal }}</span>
      <span class="jisuan">去计算 {{ checkedlength }}</span>
    </div>
    <backtop v-show="isShow" class="top" @click.native="gotopclick"></backtop>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import shoppinglistitem from "./shoppinglistitem.vue";
import scroll from "components/common/scroll/better_scroll.vue";
import button2 from "./shoppingcar_botton.vue";
import { detailbacktop } from "common/mixin";
import backtop from "components/content/backtop.vue";

export default {
  // 组件名称
  name: "shoppingcarlist", // 组件参数 接收来自父组件的数据
  props: {}, // 局部注册的组件
  components: { shoppinglistitem, scroll, button2, backtop }, // 组件状态值
  data() {
    return {
      savey: 0,
      isShow: false,
    };
  },
  methods: {
    // 点击全选按钮:如果全选按钮状态为true,说明没有商品没被选中,那么就让所有的商品全部不选中,否则反之
    // 因为
    allclick() {
      if (this.ischeckedall) {
        this.cartlist.forEach((ele) => {
          ele.checked = false;
        });
      } else {
        this.cartlist.forEach((ele) => {
          ele.checked = true;
        });
      }
    },
    scrolltop(position) {
      // 判断滚动到什么时候显示回到顶部按钮
      this.isShow = -position.y > 226;
    },
    shanchu(id) {
      this.$store.dispatch("delete", id).then((res) => {
        console.log(res);
      });
    },
  },
  computed: {
    // 解构出来的mapGetters 后面跟( [getters里的属性方法名] )
    ...mapGetters(["cartlist"]),
    // 被选中的商品的总价格
    gettotal() {
      return (
        "¥" +
        this.cartlist
          .filter((ele) => {
            return ele.checked;
          })
          .reduce((h, n) => {
            return h + n.lowNowPrice * n.count;
          }, 0)
          .toFixed(2)
      );
    },
    // 被选中商品的总数量
    checkedlength() {
      return this.cartlist
        .filter((ele) => {
          return ele.checked;
        })
        .reduce((h, n) => {
          return h + n.count;
        }, 0);
    },
    // 全选按钮的状态
    ischeckedall() {
      // 购物车没有商品的时候默认返回false 全部选中的时候返回true,有一个没被选中就返回false
      if (this.cartlist.length == 0) return false;
      return this.cartlist.every((item) => {
        return item.checked == true;
      });
    },
  },
  mixins: [detailbacktop],
  activated() {
    this.$refs.scroll.bscroll.scrollTo(0, this.savey, 0);
    this.$refs.scroll.bscroll.refresh();
  },
  // 离开home组件,处于不活跃状态时保存当前的滚动距离
  deactivated() {
    this.savey = this.$refs.scroll.bscroll.y;
  },
  updated() {
    this.$refs.scroll.bscroll.refresh();
  },
};
</script>
<style scoped>
.choose {
  position: relative;
  top: 0px;
  left: 45px;
}
.content {
  height: calc(100vh - 44px - 49px - 40px);
  margin-top: 44px;
}
.total {
  position: relative;
  top: 0px;
  left: 50px;
}
.bottom {
  position: fixed;
  left: 0;
  bottom: 49px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #eee;
}

.jisuan {
  display: block;
  width: 100px;
  text-align: center;
  float: right;
  background-color: orange;
  color: #fff;
}
.top {
  position: fixed;
  bottom: 120px !important;
  right: 20px;
}
</style>